<template>
  <div class="c-p release-box">
    <!-- -mh24 c-pv30 c-bg-white c-br20 c-ph24 c-h c-flex-column -->
    <div class="main-wrap">
      <div class="release-main-con">
        <div v-if="themeId && themeDetail" class="c-flex-shrink0 c-bg-white c-br20 c-ph24 c-pv20 c-mb20">
          <div class="c-flex-row c-aligni-center c-fs22 c-fc-gray">展示日期：
            <span v-if="themeDetail.isShowTime == 1" class="c-fc-xblack">{{themeDetail.showEndTime}} 到期</span>
            <span v-if="themeDetail.isShowTime == -1" class="c-fc-xblack">长期有效</span>
          </div>
          <div v-show="themeDetail.themeIntro != ''" class="c-mt20 c-fs22 c-fc-xblack c-wb-ba c-lh36">
            <span class="c-fc-gray c-flex-shrink0">主题简介：</span> {{themeDetail.themeIntro}} <span v-if="isShowOpenFlage" @click.stop="handleClickOpen()"
              class="theme-fc c-ws-ka">{{openFlage ? '收起':'展开'}}</span>
          </div>
        </div>
        <div class="c-flex-1 c-flex-column c-text-hidden c-bg-white c-br20  c-pb20">
          <div class="c-flex-1 c-contexty-scroll c-pt30 c-ph24">
            <template v-if="themeId && themeDetail">
              <div v-if="!isShowIssue" class="c-pb16 c-fs20 c-fc-xblack c-flex-row c-aligni-center">
                <span>发布要求：</span>
                <div class="c-pr10" v-if="themeDetail.leastWordsCount != 0">文字最少<span class="theme-fc">{{ themeDetail.leastWordsCount }}</span>字</div>
                <div class="c-pr10" v-if="themeDetail.leastImgCount != 0">图片最少<span class="theme-fc">{{themeDetail.leastImgCount}}</span>张</div>
                <div class="c-pr10" v-if="themeDetail.leastAudioSecond != 0">语音最少<span class="theme-fc">{{themeDetail.leastAudioSecond}}</span>秒</div>
                <div class="c-pr10" v-if="themeDetail.leastVideoCount != 0">视频最少<span class="theme-fc">{{themeDetail.leastVideoCount}}</span>个</div>
              </div>
            </template>
            <!-- 文字输入 -->
            <div class="textarea-container c-flex-column">
              <div v-if="themeDetail && themeDetail.themeName" class="theme-fc c-fs26 c-flex-shrink0 c-mb14">
                #{{themeDetail && themeDetail.themeName}}
              </div>
              <!-- <div class="c-flex-1 c-p c-bg-white">1111</div> -->
              <textarea rows="5" class="textarea" :maxlength="5000" :placeholder="'请随便说点什么吧~'" v-model="questionDesc" @blur="blurTextarea"></textarea>
              <div class="c-flex-row c-aligni-center c-justify-sb c-flex-shrink0 c-mt10">
                <div @click="clickThemeModal" v-if="!clockinId" class="c-maxw596 c-text-hidden c-hh40 c-pv4 c-ph20 c-fs22 theme-fc c-flex-row c-aligni-center c-br20"
                  :class="themeId && themeDetail != ''?'theme-bg-10':'c-bg-white'">
                  <div class="c-flex-row c-flex-center c-maxw596 c-h c-text-hidden">
                    <i class="iconfont c-pr8 c-fs20">&#xe6fd;</i>
                    <span class="c-text-ellipsis1 theme-fc">{{themeId && themeDetail != '' ? themeDetail && themeDetail.themeName:'添加主题'}}</span>
                  </div>
                </div>
                <div class="c-fs22 c-fc-gray c-textAlign-r c-flex-1"> {{questionDesc && questionDesc.length || 0}}/5000 </div>
              </div>
            </div>
            <!-- 图片 -->
            <div class="c-pt24 c-contextX-scroll c-ws-n c-p" v-if="uploadImgList.length > 0">
              <div class="c-inlineblack c-ww100 c-hh100 c-flex-row c-flex-center c-p c-mr20" v-for="(item, index) in uploadImgList" :key="index" :class="index % 9 == 0 ? '':'c-mr20'">
                <div @click="delUploadImage(index)" class="c-pa icon_del iconfont c-fs28 c-opacity70 c-fc-sxblack c-pz100">&#xe6ec;</div>
                <img @click="clickPreviewImage(item,uploadImgList)" class="c-ww100 c-hh100 c-bd1 c-object-fit-cover c-br10" :src="$addXossFilter(item)" alt="">
              </div>
            </div>
            <!-- 音频 -->
            <template v-for="(item, index) in uploadAudioList">
              <div class="c-pt16 c-flex-row c-aligni-center" v-if="uploadAudioList.length > 0" :key="index">
                <div class="c-maxw440 c-flex-1 c-flex-row c-aligni-center c-justify-sb c-br30 c-pv6 c-pr20 c-pl6 theme-bg-10 theme-fc" :style="'width:' + (item.time * 1.5 + 150) + 'px;'"
                  @click="clickPlayAudio(item.url)">
                  <div class="c-bg-white c-ww48 c-hh48 c-br50 c-flex-row c-justify-center c-aligni-center">
                    <span class="iconfont c-fs22">{{playAduioSrc != item.url ? '&#xe6dd;':'&#xe6de;'}}</span>
                  </div>
                  <div v-if="playAduioSrc == item.url" class="audio-play-anim c-flex-row c-justify-center c-aligni-center">
                    <div class="item theme-bg"></div>
                    <div class="item theme-bg"></div>
                    <div class="item theme-bg"></div>
                    <div class="item theme-bg"></div>
                    <div class="item theme-bg"></div>
                    <div class="item theme-bg"></div>
                    <div class="item theme-bg"></div>
                    <div class="item theme-bg"></div>
                    <div class="item theme-bg"></div>
                  </div>
                  <span class="c-fs22 theme-fc">{{item.time}}"</span>
                </div>
                <i @click="clickDelAudio(index)" class="iconfont c-fs28 c-fc-sxblack c-pl20 c-opacity70">&#xe6ec;</i>
              </div>
            </template>
            <!-- 视频 -->
            <div class="c-pt16" v-if="uploadVideoList.length > 0">
              <div class="c-flex-row c-aligni-center" v-for="(item, index) in uploadVideoList" :key="index">
                <div @click="clickShowVideo(0, 1, item.realUrl)" class="c-p c-ww320 c-hh180 c-fc-white c-flex-row c-flex-center">
                  <i class="iconfont c-pa c-fs64 c-fc-white">&#xe869;</i>
                  <img class="c-w100 c-br10 c-h c-object-fit-cover" v-lazy="$addXossFilter(item.videoLogo, 'https://kposshzcdn.ckjr001.com/admin/material/9_material_admin/image/assets/i/wap/clockIn/video-bg1.png')" alt="" />
                </div>
                <i @click="clickDelVideo(index)" class="iconfont c-fs28 fc-sxblack c-pl20 c-opacity70">&#xe6ec;</i>
              </div>
            </div>
            <!-- 课程 -->
            <div class="c-pv30" v-if="circleRecommendList.length > 0">
              <div class="c-flex-row c-aligni-center" v-for="(item, index) in circleRecommendList" :key="index" :class="index == circleRecommendList.length - 1 ?'':'c-mb24'">
                <div class="max-w500 c-bg-f2 c-ph20 c-hh40 c-flex-row c-flex-center c-br20 c-fs22 c-fc-xblack">
                  <div class="c-flex-row c-flex-center c-h c-maxw546 c-text-hidden">
                    <template v-if="item.typeBar == 1">
                      <div class="theme-fc">【{{item.type == 0 ?'视频':item.type == 1 ? '音频': '图文'}}】</div>
                    </template>
                    <template v-else-if="item.typeBar == 4">
                      <div class="theme-fc">【专栏】</div>
                    </template>
                    <template v-else-if="item.typeBar == 5">
                      <div class="theme-fc">【测评】</div>
                    </template>
                    <template v-else-if="item.typeBar == 6">
                      <div class="theme-fc">【活动】</div>
                    </template>
                    <template v-else-if="item.typeBar == 7">
                      <div class="theme-fc">【打卡】</div>
                    </template>
                    <template v-else-if="item.typeBar == 8">
                      <div class="theme-fc">【商城】</div>
                    </template>
                    <div class="c-text-ellipsis1 c-flex-1">{{item.name}}</div>
                  </div>
                </div>
                <i class="iconfont c-fs28 fc-sxblack c-pl20 c-opacity70" @click="handleClickDelRecommend(index)">&#xe6ec;</i>
              </div>
            </div>
            <!-- 文件 -->
            <ul v-if="uploadedFileList.length" class="c-pt16 c-liststyle-none">
              <li v-for="(item,index) in uploadedFileList" :key="index" class="c-flex-row c-aligni-center c-mb10 c-pv12">
                <div class="c-fs24 c-fc-xblack c-flex-row c-aligni-center c-text-hidden">
                  <div class="files-icon c-mr10 c-flex-shrink0" :class="item.suffixClassName"></div>
                  <span class="c-text-ellipsis1">{{ item.fileName }}</span>
                </div>
                <span @click="delUploadedFile(index)" class="iconfont c-fc-gray c-fs28 c-flex-shrink0 c-ml10">&#xe757;</span>
              </li>
            </ul>
          </div>
          <!-- icon -->
          <div class="c-ph28 c-flex-shrink0 c-pt20">
            <div>
              <div class="c-flex-row c-justify-sb c-aligni-center">
                <div class="c-p" :class="uploadImgList.length < 9?'':'c-opacity50'">
                  <div @click="clickChoosePic">
                    <div class="c-bg-white c-flex-column c-flex-center c-justify-center c-ww80 c-hh40">
                      <i class="iconfont c-fs32 c-fc-xblack">&#xe691;</i>
                    </div>
                    <div class="c-fs20 c-fc-sblack c-mt12 c-textAlign-c">图片</div>
                  </div>
                  <input id="uploadImg" v-if="!isWeiXin" class="c-pa c-opacity0 c-p-t0 c-p-l0 c-ww80 c-hh80 c-fs10" type="file" ref="uploadImg" accept="image/*" @change="clickChoosePic($event)">
                </div>
                <div :class="sendListIndex >= 20?'c-opacity50':''">
                  <div @click="clickVoiceModal">
                    <div class="c-bg-white c-brp50 c-flex-column c-flex-center c-justify-center c-ww80 c-hh40">
                      <i class="iconfont c-fs32 c-fc-xblack">&#xe687;</i>
                    </div>
                    <div class="c-fs20 c-fc-sblack c-mt12 c-textAlign-c">音频</div>
                  </div>
                </div>
                <div class="c-text-hidden" :class="uploadVideoList.length > 0?'c-opacity50':''">
                  <div @click="clickUploadVideo">
                    <div class="c-bg-white c-brp50 c-flex-column c-flex-center c-justify-center c-ww80 c-hh40">
                      <i class="iconfont c-fs32 c-fc-xblack">&#xe6cf;</i>
                    </div>
                    <div class="c-fs20 c-fc-sblack c-mt12 c-textAlign-c">视频</div>
                  </div>
                  <input class="hide c-cursor-p needsclick c-fs0 c-w0" id="myUpload" type="file" accept="video/*" @change='onInputChange($event)' />
                </div>
                <div @click="handleClickSelectRecommend" :class="circleRecommendList.length >=5?'c-opacity50':''">
                  <div class="c-bg-white c-brp50 c-flex-column c-flex-center c-justify-center c-ww80 c-hh40">
                    <i class="iconfont c-fs32 c-fc-xblack">&#xe734;</i>
                  </div>
                  <div class="c-fs20 c-fc-sblack c-mt12 c-textAlign-c">推荐</div>
                </div>
                <div class="c-p c-text-hidden" :class="uploadedFileList.length >= 10?'c-opacity50':''">
                  <div class="c-bg-white c-brp50 c-flex-column c-flex-center c-justify-center c-ww80 c-hh40">
                    <i class="iconfont c-fs32 c-fc-xblack">&#xe75c;</i>
                  </div>
                  <div class="c-fs20 c-fc-sblack c-mt12 c-textAlign-c">文件</div>
                  <input @change='uploadFileChange' type="file" class="c-pa c-p-l0 c-p-t0 c-p-b0 c-fs60 c-opacity0" multiple accept=".docx,.pdf,.doc,.xls,.xlsx,.ppt,.ppsx,.txt" />
                </div>
              </div>
            </div>
          </div>
        </div>
        <my-loading :showLoading="showProgress" :text="uploadProgress"></my-loading>
      </div>
      <!-- 底部 -->
      <div class="c-w100 c-maxw640 c-hh88 c-bg-white c-ph24 c-flex-row c-justify-center c-aligni-center" @click="handleClickSendCircle">
        <div class="c-fs28 c-fc-white theme-bg c-w100 c-hh64 c-br30 c-flex-row c-justify-center c-aligni-center"
          :class="questionDesc == '' && circleRecommendList.length == 0 && uploadImgList.length == 0 && uploadVideoList.length == 0 && uploadAudioList.length == 0 && uploadedFileList.length == 0 ? 'c-opacity30':'c-opacity100'">
          发布
        </div>
      </div>
    </div>
    <!-- 音频 -->
    <audio id="audio" @ended="playAudioEnd" class="c-pf c-p-l-100"></audio>
    <open-modal :openModal="showAnswerModal" @closeModal="closeModal">
      <div class="c-w100 c-bg-white c-flex-column c-ph24 c-pz1000 c-hh288 c-br-tr40 c-br-tl40">
        <div class="c-pt60 c-flex-column c-flex-center">
          <div @click="clickStartRecord" v-show="recordStatus == 'RECORD_START'" class="c-ww132 c-hh132 c-brp50 bg-green c-flex-row c-flex-center c-opacity90">
            <span class="iconfont c-fs56 c-fc-white">&#xe639;</span>
          </div>
          <img @click="clickStopRecord" v-show="recordStatus == 'RECORDING'" class="c-ww132 c-hh132" src="../../../assets/i/wap/course/audio_record.gif" alt="" />
          <div class="c-flex-row c-aligni-center c-justify-sb c-ww500" v-show="recordStatus == 'RECORD_END'">
            <div class="c-textAlign-c c-fs22" :class="isPlayTest ? 'theme-fc':'fc-lgreen'" @click="clickTryListen">
              <div class="iconfont c-fs40">&#xe993;</div>
              <div class="c-pt10">{{isWeiXin ? (isPlayTest ? '试听中':'试听') : ''}}</div>
            </div>
            <div @click="clickSentRecord" class="iconfont c-fc-white c-ww130 c-hh132 c-brp50 bg-green c-opacity90 c-flex-row c-flex-center c-fs80">&#xe824;</div>
            <div class="fc-lgreen c-fs22" @click="clickRecordAgain">
              <div class="iconfont c-fs40">&#xe994;</div>
              <div class="c-pt10">重录</div>
            </div>
          </div>
          <div v-show="recordStatus == 'RECORD_START'" class="c-fs20 c-fc-gray c-pt24">点击开始录音</div>
          <div v-show="recordStatus == 'RECORDING'" class="c-fs20 c-fc-gray c-pt24">
            录音中，还能录
            <span class="fc-lgreen">{{60-recordTime}}s</span>
          </div>
          <div v-show="recordStatus == 'RECORD_END'" class="c-fs20 c-fc-gray c-pt24">
            <span>时长</span>
            <span><span class="fc-lgreen">{{recordTime}}</span>s</span>
          </div>
        </div>
      </div>
    </open-modal>
    <!-- 视频 -->
    <video-popup :showVideo="showVideo" @clickCloseVideo="clickCloseVideo" :videoSrc="currentVideoObj.videoSrc" :m3u8Url="currentVideoObj.m3u8Url"></video-popup>
    <!-- 更换主题 -->
    <open-modal :openModal="showThemeModal" @closeModal="closeThemeModal">
      <div class="c-bg-white c-br-tl20 c-br-tr20 c-text-hidden c-hh640">
        <div class="c-p">
          <div class="c-w100 c-flex-row c-flex-center c-fs28 c-hh100 c-fc-xblack c-fw-b ">更换主题</div>
          <i class="iconfont c-pa c-p-t30 c-p-r24 c-fc-sgray c-fs30" @click="closeThemeModal">&#xe84e;</i>
        </div>
        <div class="c-w100 c-bg-white c-hh540 c-contexty-scroll c-scroll-touch" id="scrollContent" @scroll="scrollContent($event)">
          <div class="c-w100 c-ph24 ">
            <div v-if="circleThemeList.length > 0" class="c-flex-column c-pv24 c-bd-b1" @click.stop="handleClickNoneTheme()">
              <div class="c-fs24 c-fc-xblack c-text-ellipsis2">
                <i class="iconfont theme-fc c-pr8">&#xe6fd;</i>无主题
              </div>
            </div>
            <div class="c-flex-column c-pv24 c-bd-b1" v-for="(item, index) in circleThemeList" :key="index" @click.stop="handleClickCircleTheme(item)">
              <div class="c-fs24 c-fc-xblack c-text-ellipsis2">
                <i class="iconfont theme-fc c-pr8">&#xe6fd;</i>{{item.themeName}}
              </div>
              <div class="c-mt12 c-flex-row c-justify-sb c-fs20 c-fc-gray c-aligni-center">
                <div>
                  <span>{{item.joinMemberCount | formatTenThousand}}人加入</span> |
                  <span>{{item.feedCount | formatTenThousand}}条动态</span>
                </div>
                <div class="c-fs20 theme-fc" v-if="item.joinType == 1">免费</div>
                <div class="c-fs20 theme-fc" v-if="item.joinType == 2">
                  <span class="c-lh">{{'￥' | iosPriceFilter}}{{item.price}}</span>
                </div>
              </div>
            </div>
          </div>
          <loading-status-tem :dataStatus="themeDataStatus" noDataText="暂无数据" class="c-bg-white"></loading-status-tem>
        </div>
      </div>
    </open-modal>
    <circle-select-recommend @closeSelectRecommendModal="closeSelectRecommendModal" @handleClickSelectRecommendModal="handleClickSelectRecommendModal"
      :showSelectRecommend="showSelectRecommend"></circle-select-recommend>
    <!-- 语音发送 -->
    <open-modal :openModal="showAudioModal" @closeModal="closeAudioModal">
      <div class="c-bg-white c-br-tl20 c-br-tr20 c-pr24 c-pl24 c-fs24 c-fc-xblack">
        <div class="c-pv24 c-textAlign-c c-bd-b1" @click.stop="handleClickAudioSend(0)">语音手动发送</div>
        <div class="c-pv24 c-textAlign-c" @click.stop="handleClickAudioSend(1)">
          <p>语音自动发送</p>
          <p class="c-fc-gray c-mt12 c-fs20">每60s自动发送,适合录制长录音</p>
        </div>
      </div>
    </open-modal>
  </div>
</template>

<script>
import { utilJs, wxUtilJs } from "@/utils/common.js";
import { mapMutations, mapState } from 'vuex';
import myLoading from "@/plugin/loading/loading.vue";
import videoPopup from "@/components/templates/common/videoPopup.vue";
import OpenModal from "@/components/templates/common/openModal.vue";
import loadingStatusTem from "@/components/templates/common/loadingStatusTem.vue";
import circleSelectRecommend from "@/components/homePage/circle/circleSelectRecommend.vue";
import TcVod from "vod-js-sdk-v6";
import record from "@/utils/recorder.js";
import circleUtils from '@/utils/circleUtils.js';
let imgData = {};
let serverIdImgArr = [];
let uploader = null;
let recordTimeCon; //录音计时控制器
let currentLocalId = ""; //当前录制本地音频ID
let audioServerId = ""; //音频serverId
let curPlayLocalId = ""; //当前播放本地音频ID
// let progressTime;
const LIMIT = 10;
let pageIndex = 1;
let themePage = 1;
export default {
  name: 'CircleRelease',
  components: {
    myLoading,
    videoPopup,
    OpenModal,
    loadingStatusTem,
    circleSelectRecommend
  },
  data() {
    return {
      isWeiXin: true,
      askType: 0, //0图文 1音频 2视频
      imageCount: 9,
      isChoosePic: 0,
      uploadImgList: [], //上传的图片列表
      uploadVideoList: [], //需要上传的视频
      showProgress: false,
      uploadProgress: '0',
      videoMp4: '',
      isPlayingAudio: false,
      showVideo: false,
      currentVideoObj: {},
      playAduioSrc: "", //播放音频地址
      showAnswerModal: false,
      recordStatus: "RECORD_START", //录音状态
      isPlayTest: false, //是否试听
      recordTime: 0,
      blob: '', //录音之后要上传七牛的音频文件
      uploadAudioList: [], //需要上传的音频
      qiniuInfo: {}, //录音完后的音频上传到七牛，这里是七牛的相关信息
      questionDesc: "",
      isClick: false,
      imgUrlListJson: "",
      progress: 0,
      openFlage: false,
      isShowOpenFlage: false, //是否显示暂开收起
      showThemeModal: false,
      themeId: '',
      themeDetail: null,
      themeDataStatus: 'HAS_MORE_DATA',
      circleThemeList: [],
      showSelectRecommend: false,
      showAudioModal: false,
      isAutoSendVoice: false, //是否自动发送音频
      sendListIndex: 0,
      uploadedFileList: [], //上传文件列表
      clockinId: 0, //打卡id
    }
  },
  computed: {
    isShowIssue() {
      let isShowIssue = this.themeDetail.leastWordsCount == 0 && this.themeDetail.leastImgCount == 0 && this.themeDetail.leastAudioSecond == 0 && this.themeDetail.leastVideoCount == 0;
      return isShowIssue;
    },
    ...mapState({
      circleRecommendList: state => state.circle.circleRecommendList
    })
  },
  deactivated() {
    this.$nextTick(() => {
      if (this.recordStatus == 'RECORDING') {
        this.clickStopRecord();
      }
    })
  },
  activated() {
    setDocumentTitle("发布动态");
    this.$store.commit('updateLoadingStatus', {
      isLoading: false
    });
    this.id = this.$route.query.id || "";//圈子id
    this.themeId = this.$route.query.themeId || this.themeId;//圈子主题id
    this.clockinId = this.$route.query.clockinId; //打卡id
    this._feedsId = this.$route.query.feedsId || "" //动态id
    this.isWeiXin = utilJs.isWeiXin();
    this.askType = 0;
    this.imageCount = 9;
    this.isChoosePic = 0;
    this.uploadImgList = [];
    this.uploadVideoList = [];
    this.showProgress = false;
    this.uploadProgress = '0';
    this.videoMp4 = '';
    this.isPlayingAudio = false;
    this.showVideo = false;
    this.currentVideoObj = {};
    this.playAduioSrc = '';
    this.showAnswerModal = false;
    this.recordStatus = "RECORD_START";
    this.isPlayTest = false;
    this.recordTime = 0;
    this.blob = "";
    this.uploadAudioList = [];
    this.qiniuInfo = {};
    this.questionDesc = "";
    this.isClick = false;
    this.imgUrlListJson = "";
    this.progress = 0;
    this.openFlage = false;
    this.showThemeModal = false;
    this.themeDetail = null;
    this.showAudioModal = false;
    this.isAutoSendVoice = false;
    this.sendListIndex = 0;
    this.uploadedFileList = []; //上传文件的列表
    this._fileSuffixRegexp = circleUtils.getFileSuffixRegexp();
    this._initDraft();
    if (document.getElementById("myUpload")) {
      document.getElementById("myUpload").value = null;
    }
    //获取阿里云签名，除了微信浏览器以外
    if (!utilJs.isWeiXin()) {
      utilJs.getAliSign(`${global.apiurl}imageSign`, (res) => {
        imgData = res;
      });
    }
    utilJs.getMethod(
      global.apiurl + "common/qiniu/uploadToken",
      (res) => {
        this.qiniuInfo.qiNiuToken = res;
      }
    );
    if (this.themeId) {
      this.getThemeDetails(this.themeId);
    }
    if (this._feedsId) {
      //编辑页面
      this._clearDraft();
      this.getFeedsDetail();

    }
    this.initDataThemeList();
    this.wechatShare();
  },
  created() {
    utilJs.appShare(this);
  },
  methods: {
    ...mapMutations({
      updateCircleRecommendList: "circle/updateCircleRecommendList"
    }),
    //初始化草稿
    _initDraft() {
      let circleReleaseDraft = JSON.parse(localStorage.getItem("circle_release_draft")) || {};
      this.questionDesc = circleReleaseDraft.questionDesc || '';
      if (circleReleaseDraft.uploadImgList) {
        this.isChoosePic = 1;
        this.uploadImgList = circleReleaseDraft.uploadImgList;
      }
      if (circleReleaseDraft.uploadVideoList) {
        console.log("circleReleaseDraft.uploadVideoList", circleReleaseDraft.uploadVideoList)
        this.uploadVideoList = circleReleaseDraft.uploadVideoList;
        let videoInfo = this.uploadVideoList[0];
        this.videoMp4 = videoInfo.realUrl;
        this.videoFirstSave({
          videoId: videoInfo.url,
          videoMp4: videoInfo.realUrl,
          videoName: videoInfo.videoName
        });
      }
      if (circleReleaseDraft.uploadAudioList) {
        this.uploadAudioList = circleReleaseDraft.uploadAudioList
      }
      this.uploadedFileList = circleReleaseDraft.uploadedFileList || [];
      // 非打卡(打卡是不能有主题)
      if (!this.$route.query.clockinId && circleReleaseDraft.themeId) {
        this.themeId = circleReleaseDraft.themeId
      }
    },
    //上传文件
    uploadFileChange(e) {
      if (this.uploadedFileList.length >= 10) {
        this.$showCjToast({
          text: "上传文件不能超过10个",
          type: "warn",
        });
        return;
      }
      let files = e.target.files;
      let limitExclude = [];
      let suffixExclude = [];
      let filterFiles = [];
      let errorTipStr = "";
      Array.from(files).forEach(item => {
        if ((filterFiles.length + this.uploadedFileList.length) > 10) return;
        if (item.size > 10 * 1024 * 1024) {
          limitExclude.push(item.name);
        } else if (!this._fileSuffixRegexp.test(item.name)) {
          suffixExclude.push(item.name);
        } else {
          filterFiles.push(item);
        }
      });
      if (limitExclude.length) {
        errorTipStr = limitExclude.join(";") + "文件超出10M";
      }
      if (suffixExclude.length) {
        errorTipStr = suffixExclude.join(";") + "文件格式不对";
      }
      if (errorTipStr) {
        this.$showCjToast({
          text: errorTipStr,
          type: "warn",
        });
      }
      if (filterFiles.length) {
        this.$loading.show({
          text: "上传中..."
        });
        this._uploadFiles(filterFiles).then(() => {
          this.$loading.hide();
          this._saveDraft("uploadedFileList", this.uploadedFileList)
        })
      }
      e.target.value = "";
    },
    //删除文件
    delUploadedFile(index) {
      this.uploadedFileList.splice(index, 1);
      this._saveDraft("uploadedFileList", this.uploadedFileList)
    },
    //上传文件
    _uploadFiles(data, index = 0) {
      return new Promise((resolve) => {
        let currItem = data[index];
        let suffixStr = circleUtils.getFileSuffix(currItem.name)
        let uId = localStorage.getItem("userId");
        let key = (new Date().getTime()) + "_mp_file_" + uId + (suffixStr ? `.${suffixStr}` : '');
        let formData = new FormData();
        formData.append('token', this.qiniuInfo.qiNiuToken);
        formData.append("key", key);
        formData.append("file", currItem);
        utilJs.postFileMethod(global.QINIU_UPLOAD_URL, formData, res => {
          index++;
          let fullUrl = global.QINIU_DISPLAY_URL + res.key;
          this.uploadedFileList.push({
            fileName: currItem.name,
            fileSize: currItem.size,
            format: currItem.type,
            qiniuObject: res.key,
            fullUrl: fullUrl,
            suffixClassName: "files-" + (suffixStr ? suffixStr : 'default'),
          });
          if (index <= (data.length - 1) && this.uploadedFileList.length < 10) {
            this._uploadFiles(data, index);
          } else {
            resolve();
          }
        }, () => {
          index++;
          if (index <= (data.length - 1) && this.uploadedFileList.length < 10) {
            this._uploadFiles(data, index);
          } else {
            resolve();
          }
        })
      })
    },
    handleClickAudioSend(index) {
      this.showAudioModal = false;
      this.showAnswerModal = true;
      this.askType = 1;
      if (index == 0) {
        this.isAutoSendVoice = false;
        if (this.uploadAudioList[0] && this.uploadAudioList[0].url) return
      } else {
        this.isAutoSendVoice = true;
      }
    },
    // 获取动态详情
    getFeedsDetail() {
      utilJs.getMethod(`${global.apiurl}circle/getFeedsDetail/${this._feedsId}`, res => {
        let resourceList = res.resourceList;
        if (Array.isArray(resourceList.imgArr)) {
          this.isChoosePic = 1;
          this.uploadImgList = resourceList.imgArr;
          this.imageCount = 9 - this.uploadImgList.length;
        }
        if (resourceList.videoArr) {
          this.videoMp4 = resourceList.videoArr.content;
          this.uploadVideoList = [{
            videoLogo: resourceList.videoArr.videoLogo,
            url: resourceList.videoArr.videoId,
            realUrl: resourceList.videoArr.content
          }];
        }
        if (Array.isArray(resourceList.audioArr)) {
          resourceList.audioArr.forEach(item => {
            this.uploadAudioList.push({
              url: item.audioUrl,
              time: item.audioTime
            })
          })
        }
        if (Array.isArray(resourceList.fileArr)) {
          resourceList.fileArr.forEach(item => {
            let suffixStr = circleUtils.getFileSuffix(item.fileName)
            let fullUrl = global.QINIU_DISPLAY_URL + item.qiniuObject;
            this.uploadedFileList.push({
              ...item,
              fullUrl: fullUrl,
              suffixClassName: "files-" + (suffixStr ? suffixStr : 'default'),
            })
          })
        }
        if (Array.isArray(res.relationContent)) {
          this.updateCircleRecommendList(res.relationContent);
        }
        this.questionDesc = resourceList.textStr;
      }, failRes => { })
    },
    closeAudioModal() {
      this.showAudioModal = false;
    },
    handleClickDelRecommend(index) {
      this.circleRecommendList.splice(index, 1)
      this.updateCircleRecommendList(this.circleRecommendList);
      this._saveDraft("circleRecommendList", this.circleRecommendList);
    },
    closeSelectRecommendModal() {
      this.showSelectRecommend = false;
    },
    handleClickSelectRecommendModal() {
      this.showSelectRecommend = false;
    },
    // 添加推荐
    handleClickSelectRecommend() {
      if (this.circleRecommendList.length >= 5) return;
      this.showSelectRecommend = true;
    },
    handleClickNoneTheme() {
      this.themeId = '';
      this.themeDetail = null;
      this.showThemeModal = false;
    },
    handleClickCircleTheme(item) {
      let _this = this;
      if (!item.isJoin && item.joinType == 2) {
        this.showThemeModal = false;
        // 无权限且为付费模式
        this.$cjConfirm({
          title: '提示', //
          titleCenter: true, //标题是否居中
          message: '该主题设置了付费后参与,请先完成支付',
          messageCenter: true, //内容是否居中
          showMasker: true, //是否显示透明背景
          clickCloseModal: false, //是否点击透明背景关闭弹窗
          showCancelButton: true, //是否显示取消按钮
          cancelButtonText: '', //取消按钮文本
          confirmButtonText: '去支付', //确认按钮文本
          onConfirm() {
            let queryT = null;
            queryT = {
              cId: 0,
              extId: item.themeId,
              ckFrom: global.ckFrom.circleTheme,
              extraId: 0,
            }
            _this.$routerGo(_this, "push", {
              path: "/homePage/course/coursePay",
              query: queryT
            });
          },
          onCancel() {
          },
        })
      } else {
        this.themeId = item.themeId;
        this.showThemeModal = false;
        this.getThemeDetails(item.themeId);
        this._saveDraft("themeId", item.themeId);
      }
    },
    scrollContent() {
      let element = document.getElementById('scrollContent');
      utilJs.elementLoading(element, () => {
        if (this.themeDataStatus == 'HAS_MORE_DATA' && this.circleThemeList.length > 0) {
          this.getThemeList();
        }
      })
    },
    initDataThemeList() {
      pageIndex = 1;
      themePage = 1;
      this.themeDataStatus = 'HAS_MORE_DATA';
      this.circleThemeList = [];
      this.getThemeList();
    },
    // 获取主题列表
    getThemeList() {
      if (this.themeDataStatus == 'LOADING') {
        return;
      }
      this.themeDataStatus = 'LOADING';
      utilJs.getMethod(`${global.apiurl}circle/getThemeList/${this.id}?index=${pageIndex}&page=${themePage}&limit=${LIMIT}`, res => {
        if (pageIndex == 1) {
          this.circleThemeList = res.data;
        } else {
          this.circleThemeList = [...this.circleThemeList, ...res.data];
        }
        if (res.total * 1 == this.circleThemeList.length) {
          this.themeDataStatus = res.total * 1 == 0 ? "NO_DATA" : "NO_MORE_DATA";
        } else {
          this.themeDataStatus = 'HAS_MORE_DATA';
          pageIndex += LIMIT;
          themePage++;
        }
      }, failRes => {
        this.themeDataStatus = "DATA_ERROR";
      })
    },
    getThemeDetails(themeId) {
      utilJs.getMethod(`${global.apiurl}circle/getThemeDetails?circleId=${this.id}&themeId=${themeId}`, res => {
        if (res.themeIntro && res.themeIntro.length > 18) {
          this.isShowOpenFlage = true;
          this.openFlage = false;
        } else {
          this.isShowOpenFlage = false;
          this.openFlage = true;
        }
        res.themeIntroBackup = res.themeIntro;
        this.themeDetail = res;
        this.swithThemeIntro();
      })
    },
    clickThemeModal() {
      this.showThemeModal = true;
    },
    closeThemeModal() {
      this.showThemeModal = false;
    },
    handleClickOpen() {
      this.openFlage = !this.openFlage;
      this.swithThemeIntro();
    },
    swithThemeIntro(data = this.themeDetail) {
      if (this.openFlage) {
        data.themeIntro = data.themeIntroBackup;
      } else {
        data.themeIntro = data.themeIntro.substr(0, 18) + '...';
      }
    },
    // 发送
    handleClickSendCircle() {
      if (this.questionDesc == '' && this.circleRecommendList.length == 0 && this.uploadImgList.length == 0 && this.uploadVideoList.length == 0 && this.uploadAudioList.length == 0) {
        this.$showCjToast({
          text: "请输入内容后发送",
          type: "warn",
        });
        return true;
      }
      if (this.isClick) {
        return true;
      }
      this.isClick = true;
      if (this.isChoosePic == 1) {
        this.imgUrlListJson = JSON.stringify(this.uploadImgList)
      }
      let audioArr = []
      this.uploadAudioList.forEach(element => {
        let object = {
          type: 3,
          content: element.url,
          time: element.time
        }
        audioArr.push(object)
      });
      let fileArr = [];
      this.uploadedFileList.forEach(item => {
        fileArr.push({
          fileName: item.fileName,
          fileSize: item.fileSize,
          format: item.format,
          qiniuObject: item.qiniuObject
        })
      })
      let sendData = {
        themeId: this.themeId,
        content: this.questionDesc,
        imgArr: {
          type: 2,
          content: this.imgUrlListJson || ""
        },
        audioArr: audioArr,
        videoArr: {
          type: 4,
          videoLogo:this.uploadVideoList.length > 0 ? this.uploadVideoList[0].videoLogo : "",
          content: this.videoMp4 || "",
          fileId: this.uploadVideoList.length > 0 ? this.uploadVideoList[0].url : ""
        },
        fileArr: fileArr,
        relationContent: this.circleRecommendList || [],
      }
      if (this._feedsId) {
        sendData.feedsId = this._feedsId;
      }
      if (this.clockinId) {
        sendData.signCardId = this.clockinId;
      }
      utilJs.postMethod(global.apiurl + `circle/releaseFeeds/${this.id}`, sendData, res => {
        if (res.state == 1) {
          circleUtils.togglePoints({ actId: res.circleFeedsId, actType: 1, handleType: 1, sourceType: 7 }, this.id, this, true).then(resText => {
            let text = res.msg;
            if (resText) {
              text = text + "," + resText
            }
            this.$showCjToast({
              text: text,
              type: "success"
            }).then(() => {
              this.isClick = false;
              this.publicSuccessCB();
            });
          }).catch(() => {
            console.log("res.msg", res.msg);
            this.$showCjToast({
              text: res.msg,
              type: "success",
            });
            this.isClick = false;
            this.publicSuccessCB();
          })
          this._clearDraft();
          this.updateCircleRecommendList([])
        }
      }, failRes => {
        this.isClick = false;
      })
    },
    publicSuccessCB() {
      if (this.themeId) {
        this.$routerGo(this, "replace", {
          path: "/homePage/circle/circleTheme",
          query: {
            themeId: this.themeId
          }
        })
      } else if (this.clockinId) {
        this.$routerGo(this, "replace", {
          path: "/homePage/circle/circlePlanClockinDetail",
          query: {
            circleId: this.id,
            clockinId: this.clockinId
          }
        })
      } else {
        this.$routerGo(this, "replace", {
          path: "/homePage/circle/circleMaster",
          query: {
            id: this.id
          }
        })
      }
    },
    // 删除音频
    clickDelAudio(index) {
      if (document.getElementById("audio")) {
        this.playAduioSrc = "";
        document.getElementById("audio").src = this.playAduioSrc;
        document.getElementById("audio").pause();
      }
      this.uploadAudioList.splice(index, 1);
      this.sendListIndex--;
      this._saveDraft("uploadAudioList", this.uploadAudioList)
    },
    //点击开始播放音频
    clickPlayAudio(audioUrl, questionStatus) {
      if (questionStatus == -1) {
        return;
      }
      let audio = document.getElementById("audio");
      if (this.playAduioSrc == audioUrl) {
        this.playAduioSrc = "";
        this.progress = 0;
        document.getElementById("audio").src = this.playAduioSrc;
        return;
      }
      this.playAduioSrc = audioUrl;
      this.progress = 0;

      if (this.playAduioSrc.includes("http") || !this.playAduioSrc) {
        document.getElementById("audio").src = this.playAduioSrc;
        audio.play();
        audio.removeEventListener("ended", this.playAudioEnd, false);
        audio.addEventListener("ended", this.playAudioEnd, false);
        // let progressIndex = 0;
        // progressTime = setInterval(() => {
        //   progressIndex++;
        //   if (this.recordTime - progressIndex >= 0) {
        //     this.progress = (100 / this.recordTime) * progressIndex;
        //   } else {
        //     clearInterval(progressTime)
        //   }
        // }, 1000)
      } else {
        wxUtilJs.downloadVoice({ serverId: this.playAduioSrc }).then(res => {
          curPlayLocalId = res;
          wxUtilJs.playVoice({ localId: res });
        });
      }
      this.isPlayingAudio = true;
    },
    //点击重录
    clickRecordAgain() {
      this.recordStatus = "RECORD_START";
    },
    //音频上传成功
    uploadAudioSuccess(audioContent) {
      return new Promise((resolve, reject) => {
        let audioItem = {
          url: audioContent.content,
          time: audioContent.time
        };
        this.uploadAudioList.push(audioItem);
        if (this.uploadAudioList.length >= 20) {
          this.showAnswerModal = false;
        }
        this._saveDraft("uploadAudioList", this.uploadAudioList)
        resolve(this.uploadAudioList.length)
        // if (this.uploadAudioList.length >= 20) {
        //   this.showAnswerModal = false;
        //   this.clickRecordAgain();
        //   return;
        // } else if (this.isAutoSendVoice && this.recordStatus == "RECORD_END") {
        //   this.clickStartRecord();
        // }
      })
    },
    //上传音频
    syncUploadAudio(serverId, recordTime) {
      return new Promise((resolve, reject) => {
        if (!this.isAutoSendVoice) {
          this.showAnswerModal = false;
        }
        utilJs.postMethod(
          global.apiurl + "circle/downWxMediaSpx",
          {
            content: serverId
          },
          (res) => {
            this.$loading.hide();
            let audioContent = {
              content: res.audioUrl,
              time: recordTime
            };
            this.uploadAudioSuccess(audioContent).then((res) => {
              resolve(res)
            })
          },
          (failRes) => {
            this.$loading.hide();
            this.showAnswerModal = false;
          }
        );
      })
    },
    //点击发送录音
    clickSentRecord() {
      return new Promise((resolve, reject) => {
        this.recordStatus = "RECORD_START";
        this.sendListIndex++;
        let recordTime = this.recordTime
        if (!this.isAutoSendVoice) {
          this.showAnswerModal = false;
        }
        if (this.isPlayTest) {
          wxUtilJs.stopVoice({ localId: currentLocalId });
          this.isPlayTest = false;
        }
        if (this.isWeiXin) {
          wxUtilJs.uploadVoice({ localId: currentLocalId }).then(serverId => {
            audioServerId = serverId;
            this.syncUploadAudio(audioServerId, recordTime).then((res) => {
              resolve(res)
            })
          });
        } else {
          record.uploadAudioFile(this.blob, this.qiniuInfo, sres => {
            audioServerId = sres;
            this.syncUploadAudio(audioServerId, recordTime).then((res) => {
              resolve(res)
            })
          }, () => { });
        }
      })
    },
    // 点击停止录音
    clickStopRecord() {
      this.recordStatus = "RECORD_END";
      clearInterval(recordTimeCon);
      if (this.isWeiXin) {
        wxUtilJs.stopRecord().then(localId => {
          currentLocalId = localId;
        });
      } else {
        record.recStop(res => {
          this.blob = res;
        });
      }
      if (this.recordTime < 1) {
        this.$showCjToast({
          text: "录音时间太短",
          type: "warn",
        });
        this.recordStatus = "RECORD_START";
      }
    },
    //跳转圈子主详情页
    rediretToCircleFeed() {
      this.$routerGo(this, "replace", {
        path: "/homePage/circle/circleFeed",
        query: {
          id: this.id
        }
      })
    },
    // 点击开始录音
    clickStartRecord() {
      if (this.sendListIndex >= 20) {
        return;
      }
      this.recordStatus = "RECORDING";
      // 点击开始录音
      this.playAduioSrc = "";
      document.getElementById("audio").src = this.playAduioSrc;
      this.stopListenAudio();
      this.recordTime = 0;
      if (this.isWeiXin) {
        wxUtilJs.startRecord().then(res => {
          recordTimeCon = setInterval(() => {
            if (this.recordTime < 60) {
              this.recordTime++;
            } else {
              clearInterval(recordTimeCon);
              this.recordStatus = "RECORD_END";
            }
          }, 1000)
        }, failRes => {
          this.$showCjToast({
            text: "开启录音失败,请确认是否授权录音",
            type: "warn",
          });
          this.recordStatus = "RECORD_START";
        })
        wxUtilJs.onVoiceRecordEnd().then(localId => {
          this.recordStatus = "RECORD_END";
          clearInterval(recordTimeCon);
          currentLocalId = localId;
          this.voiceAutoSend()
        });
      } else {
        record.recOpen(() => {
          record.recStart();
          recordTimeCon = setInterval(() => {
            if (this.recordTime < 60) {
              this.recordTime++;
            } else {
              clearInterval(recordTimeCon);
              this.recordStatus = "RECORD_END";
            }
          }, 1000);
          record.recVoiceRecordEnd(res => {
            this.recordStatus = "RECORD_END";
            clearInterval(recordTimeCon);
            this.blob = res;
            this.voiceAutoSend()
          });
        }, () => {
          this.recordStatus = "RECORD_START";
        });
      }
    },
    voiceAutoSend() {
      if (!this.isAutoSendVoice) {
        return
      }
      this.clickSentRecord()
      if (this.sendListIndex >= 20) {
        this.showAnswerModal = false;
        this.clickRecordAgain();
        return;
      }
      setTimeout(() => {
        this.clickStartRecord();
      }, 300)
    },
    //停止试听
    stopListenAudio() {
      if (this.isPlayTest) {
        wxUtilJs.stopVoice({ localId: currentLocalId });
        this.isPlayTest = false;
      } else {
        wxUtilJs.stopVoice({ localId: curPlayLocalId });
      }
    },
    //点击试听
    clickTryListen() {
      if (!this.isWeiXin) {
        return;
      }
      this.isPlayTest = true;
      this.playAduioSrc = "";
      document.getElementById("audio").src = this.playAduioSrc;
      wxUtilJs.playVoice({ localId: currentLocalId });
    },
    closeModal() {
      if (this.recordStatus == "RECORDING") {
        return;
      }
      this.showAnswerModal = false;
    },
    clickVoiceModal() {
      // if (this.uploadAudioList[0] && this.uploadAudioList[0].url) return
      // this.askType = 1;
      // this.showAnswerModal = true;
      if (this.sendListIndex >= 20) return
      this.showAudioModal = true;
    },
    //点击关闭视频
    clickCloseVideo() {
      if (this.showVideo) {
        this.showVideo = false;
      }
    },
    // 删除视频
    clickDelVideo(index) {
      this.uploadVideoList.splice(index, 1);
      this._saveDraft("uploadVideoList", this.uploadVideoList);
    },
    //点击显示视频
    clickShowVideo(isReply, questionStatus, videoSrc, m3u8Url) {
      if (questionStatus == -1) {
        return;
      }
      if (this.isPlayingAudio == true) {
        this.playAudioEnd();
      }
      this.showVideo = true;
      this.currentVideoObj = { videoSrc, m3u8Url }
    },
    //监听音频播放结束执行的内容
    playAudioEnd() {
      //播放结束自动播放下一个非自己发的语音并且非已读语音
      this.playAduioSrc = "";
      this.progress = 0;
      document.getElementById("audio").src = this.playAduioSrc;
      this.isPlayingAudio = false;
    },
    // 获取到文件得file
    onInputChange(e) {
      let inputFile = e.target.files[0];
      if (inputFile && inputFile.size > 1024 * 1024 * 1024) {
        inputFile = {}
        this.$showCjToast({
          text: "视频文件大小不能超过1G",
          type: "warn",
        });
        document.getElementById("myUpload").value = null;
        return false;
      }
      if (inputFile) {
        this.uploadVideoToTencent(inputFile);
      }
    },
    uploadVideoToTencent(inputFile) {
      let _this = this;
      this.showProgress = true;
      const tcVod = new TcVod({
        // eslint-disable-line
        getSignature: utilJs.getVideoSign
      });
      uploader = tcVod.upload({
        mediaFile: inputFile // 媒体文件（视频或音频或图片），类型为 File
      });
      uploader.on("media_progress", function (info) {
        _this.uploadProgress = `上传进度:${Math.floor(info.percent * 100)}%`;
      });
      uploader
        .done()
        .then(result => {
          let videoInfo = {
            url: result.fileId,
            realUrl: result.video.url
          };
          this.videoMp4 = result.video.url;
          this.showProgress = false;
          utilJs.getFileInfo(result.video.url, 2, { moduleName:'circle', showLoading: true}).then((res) => {
            videoInfo.videoLogo = res.videoLogo;
            this.uploadVideoList.push(videoInfo);
            this._saveDraft("uploadVideoList", [{...this.uploadVideoList[0], videoName:inputFile.name}]);
          }).catch(() => {
            this.uploadVideoList.push(videoInfo);
            this._saveDraft("uploadVideoList", this.uploadVideoList);
          });
          let data = {
            videoId: result.fileId,
            videoMp4: result.video.url,
            videoName: inputFile.name
          };
          this.videoFirstSave(data);
          this.uploadProgress = '0';
          document.getElementById("myUpload").value = null;
        })
        .catch((err) => {
          this.showProgress = false;
          this.$showCjToast({
            text: "上传失败，请尝试重新上传",
            type: "warn",
          });
          this.uploadProgress = '0';
          document.getElementById("myUpload").value = null;
          let errorData = {
            errorMsg: JSON.stringify(err),
            errorType: "UPLOAD_VIDEO_ERROR"
          };
          utilJs.reprotError(errorData);
        })
    },
    // 保存视频
    videoFirstSave(data) {
      utilJs.postMethod(
        global.apiurl + "circle/videoFirstSave",
        data,
        (res) => { }
      );
    },
    // 上传视频
    clickUploadVideo() {
      if (this.uploadVideoList.length > 0) return
      this.askType = 2;
      document.getElementById("myUpload").click();
    },
    // 点击图片放大预览
    clickPreviewImage(imgUrl, itemImgList, questionStatus) {
      if (questionStatus == -1) {
        return;
      }
      if (!imgUrl) {
        return;
      }
      let imgUrlList = [];
      itemImgList = itemImgList.filter(item => {
        return item != 'uploadQaImg'
      })
      for (let key of itemImgList) {
        if (key) {
          imgUrlList.push(key);
        }
      }
      wxUtilJs.previewImage({
        current: imgUrl, // 当前显示图片的http链接
        urls: imgUrlList // 需要预览的图片http链接列表
      });
    },
    //保存草稿
    _saveDraft(key, val) {
      let circleRelease = JSON.parse(localStorage.getItem("circle_release_draft")) || {};
      circleRelease[key] = val;
      localStorage.setItem("circle_release_draft", JSON.stringify(circleRelease));
    },
    _clearDraft() {
      localStorage.removeItem("circle_release_draft");
    },
    //删除上传的图片
    delUploadImage(index) {
      this.uploadImgList.splice(index, 1);
      this.imageCount = 9 - this.uploadImgList.length;
      this._saveDraft("uploadImgList", this.uploadImgList)
    },
    // 上传图片
    clickChoosePic(event) {
      if (this.uploadImgList && this.uploadImgList.length == 9) {
        return
      }
      this.isChoosePic = 1;
      this.askType = 0;
      if (this.isWeiXin) {
        wxUtilJs.chooseImage({
          count: this.imageCount, // 默认9
          sizeType: ["compressed"], // 可以指定是原图还是压缩图，默认二者都有
          sourceType: ["album", "camera"] // 可以指定来源是相册还是相机，默认二者都有
        }).then(localIds => {
          localIds.reverse();
          this.$loading.show({
            text: "上传中..."
          });
          serverIdImgArr = [];
          //获取剩余能传多少张图片，若已选的图片数量大于剩余数。则只传剩余数量的图片
          let residueLength = 9 - this.uploadImgList.length;
          if (localIds.length > residueLength) {
            localIds.length = residueLength;
          }
          this.wxUploadImg(localIds, localIds.length - 1);
        })
      } else {
        utilJs.imgUpload(event.target.files, imgData, 'circle', res => {
          if (res.length > 0) {
            this.uploadImgList.push(res);
            this._saveDraft("uploadImgList", this.uploadImgList)
            document.getElementById("uploadImg").value = null;
          }
        }, fRes => { });
      }
    },
    //上传图片到微信-----IOS不能一次性传多张，只好递归传
    wxUploadImg(localIds, localIdsLength) {
      wxUtilJs
        .uploadImage({ localId: localIds[localIdsLength] }, true)
        .then(res => {
          serverIdImgArr.push(res);
          if (localIdsLength > 0) {
            this.wxUploadImg(localIds, --localIdsLength);
          } else {
            this.syncUploadPic(serverIdImgArr);
          }
        });
    },
    //上传图片到服务器
    syncUploadPic(serverIdArr) {
      utilJs.postMethod(
        global.apiurl + "common/forms/wxUploadImg",
        {
          serverId: JSON.stringify(serverIdArr),
          mediaType: 2
        },
        res => {
          this.$loading.hide();
          if (res.length > 0) {
            this.uploadImgList = [...this.uploadImgList, ...res];
            this._saveDraft("uploadImgList", this.uploadImgList)
            this.imageCount = 9 - this.uploadImgList.length;
          }
        },
        failRes => {
          this.$loading.hide();
        }
      );
    },
    blurTextarea(e) {
      this._saveDraft("questionDesc", e.target.value)
      if (navigator.userAgent.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/)) {
        setTimeout(() => {
          document.body.scrollTop = 0;
        });
      }
    },
    //分享
    wechatShare: function () {
      let title = '动态详情';
      let shareUrl = `${window.location.href.split("#")[0]}#/homePage/circle/circleFeed?id=${this.id}&refereeId=${localStorage.getItem("userId")}`;
      let shareDesc = window.localStorage.getItem("shareDesc") || '点击查看详情';
      utilJs.wechatConfig(shareUrl, title, "", shareDesc, function () { }, true);
    },
    //手机端分享
    appShare: function () {
      let title = '动态详情';
      let shareUrl = `${window.location.href.split("#")[0]}#/homePage/circle/circleFeed?id=${this.id}&refereeId=${localStorage.getItem("userId")}`;
      let shareDesc = window.localStorage.getItem("shareDesc") || '点击查看详情';
      utilJs.appShareTrue(title, "", shareUrl, shareDesc);
    }
  }
}
</script>

<style lang="scss" scoped>
@import "../../../assets/css/scss/circle.scss";
.textarea-container {
  height: 8rem;
  background: #f6f7f8;
  border: 1px solid #f2f2f2;
  border-radius: 0.5rem;
  width: 100%;
  padding: 0.5rem 0.5rem 0.3rem;
  position: relative;
}
.textarea {
  resize: none;
  line-height: 0.85rem;
  width: 100%;
  height: 100%;
  border: none;
  font-size: 0.65rem;
  flex: 1;
  background: none;
}
.fc-d8 {
  color: #d8d8d8;
}
.icon_del {
  top: -0.4rem;
  right: -0.4rem;
}
.bg-green {
  background: #6ddd73;
}
.fc-lgreen {
  color: #6ddc73;
}
.pr100 {
  padding-right: 2.5rem;
}
.c-hh124 {
  height: 3.1rem;
}
.audio_start {
  background: rgba(33, 148, 255, 0.1);
}
.circle_progress {
  position: relative;
  height: 0.1rem;
  margin: 0 0.5rem 0 0.8rem;
  border-radius: 0.1rem;
  background: #fff;
  .circle_progress_bar {
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    max-width: 100%;
    height: 0.1rem;
    border-radius: 0.1rem;
    text-align: right;
    background: #2194ff;
    .circle_round {
      display: inline-block;
      position: absolute;
      top: 50%;
      width: 0.5rem;
      height: 0.5rem;
      transform: translateY(-50%);
      border: 0.1rem solid #2194ff;
      border-radius: 50%;
      background: #fff;
    }
  }
}
.max-w500 {
  max-width: 12.5rem;
}
.main-wrap{
  position: absolute;
  top: 0;
  left:0;
  right: 0;
  bottom: 0;
  background:#F5F7FA;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.release-box{
  height: 100% !important;
  min-height: 100% !important;
}
.release-main-con{
  display: flex;
  flex-direction: column;
  flex: 1;
  flex-shrink: 0;
  margin: 0.5rem;
  background: #fff;
  border-radius: 0.5rem;
  overflow: hidden;
}
</style>